<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Eurasia大数据分析平台</title>
    <script typet="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script language="javascript">
        //        禁止浏览器缩放
        var scrollFunc=function(e){
            e=e || window.event;
            if(e.wheelDelta && event.ctrlKey){//IE/Opera/Chrome
                event.returnValue=false;
            }else if(e.detail){//Firefox
                event.returnValue=false;
            }
        };
        /*注册事件*/
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',scrollFunc,false);
        }//W3C
        window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
        //        动态设置高度
        $(function () {
            var height = $(window).height();
            $("body").height(height);
        })
    </script>
    <style>
        /*全局css*/
        body, html {
            width: 100%;
            height: 100%;
            background: url("img/body_bg.png");
            background-size: 100% 100%;
            zoom: 100%;
        }
        * {
            margin: 0;
            padding: 0;
        }
        /*头部*/
        header {
            height:13%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header img{
            width: 50%;
            position: absolute;
            margin-top: 10px
        }


        /*主内容*/
        .main_content{
            display: flex;
            justify-content: space-around;
            height: 87%;
            border: 0px solid white;
            margin-top: -1%;
        }
        /*左内容*/
        .left_content{
            width: 25%;
            height: 100%;
            border: 1px solid #0b6379;
        }
        /*右内容*/
        .right_content{
            width: 70%;
            height: 100%;
            border: 1px solid #0b6379;
        }
        /*右内容四个图表*/
        #main,#main1,#main2,#main3{
            float: left;
            margin-left: 1.9%;
            margin-top:2.6%;
            border: 2px solid #03356E;
            width: 47%;
            height: 43%;
        }
        /*左半部分上*/
        .left_node_up{
            width: 100%;
            height: 50%;
            border: 0px solid white;
        }
        /*左半部分下*/
        .left_node_down{
            width: 100%;
            height: 36%;
            margin-top: 20%;
            border-top: 1px solid white;
        }
        /*搜索*/
        .search{
            width: 100%;
        }
        .search_input{
            width: 70%;
            margin-left:3%;
            height: 25px;
            border-radius: 30px 0 0 30px;
            border-top: 1px solid #54DFE3;
            border-right: 1px solid #04070E;
            border-bottom: 1px solid #54DFE3;
            border-left: 1px solid #54DFE3;
            background-color:transparent;
            margin-top: 20px;
            padding-left: 20px;
            color: white;
        }
        .search_button{
            width: 20%;
            height: 27px;
            background-color:#071B40;
            border-top: 1px solid #54DFE3;
            border-right: 1px solid #54DFE3;
            border-bottom: 1px solid #54DFE3;
            border-left: 1px solid #04070E;
            border-radius: 0 30px 30px 0;
            color: white;
            margin-left: -8px;
            line-height: 25px;
        }
        /*左半部分头像和个人信息*/
        .stu_info{
            width: 100%;
            margin: 10px 0 0 0;
            height: 47%;
            border: 0px solid red;
            display: flex;
            justify-content: space-around;
        }
        .stu_infos{
            color: #54DFE3;
            border: 1px solid white;
            height: 100%;
            width: 60%;
        }
        .stu_head{
            width: 30%;
            height: 100%;
        }
        .stu_head img{
            width: 100%;
            height: 100%;
            border: 1px solid white;
        }
        /*搜索条件*/
        .search_tj{
            width: 100%;
            color: white;
            border: 0px solid white;
            height: 38%;
            margin-top: 5%;
        }
        .search_tj input,.search_tj select{
            width: 32%;
            border: 1px solid #54DFE3;
            background: transparent;
            height: 20px;
            color: #54DFE3;
        }
        .search_tj span{
            margin-left: 2.5%;
        }
        /*确定查询按钮*/
        .ok_query{
            display: flex;
            justify-content: center;
        }
        .ok_query button{
            height: 30px;
            width: 100px;
            border: 1px solid #54DFE3;
            border-radius: 30px;
            background: transparent;
            color: #54DFE3;
            line-height: 30px;
        }
        /*表格*/
        tr,td{
            border: 1px solid #54DFE3;
            color: white;
            height: 10%;
            text-align: center;
        }
    </style>
</head>
<body>
<header>
    <img src="https://img.alicdn.com/tps/TB1Pg3pPXXXXXcxXpXXXXXXXXXX-1920-1080.gif" alt="">
    <h2 style="margin-top: -50px;color: white">Eurasia学生数据分析平台</h2>
</header>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="main_content">
    <div class="left_content" style="position: relative">
        <!--四个角加粗-->
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 0 0 5px;
        top:-5px;
        left:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 5px 0 0;
        top:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0px 5px 5px 0;
        bottom:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0px 0px 5px 5px;
        bottom:-5px;
        left:-5px;"></span>
        <div class="left_node_up">
            <!--搜索框-->
            <div class="search">
                <input type="text" placeholder="请输入学生姓名或学号" class="search_input">
                <button class="search_button">搜索</button>
            </div>
            <!--头像图片和个人信息-->
            <div class="stu_info">
                <div class="stu_head">
                    <img src="./img/hs.jpg" alt="">
                </div>
                <div class="stu_infos">
                    <span style=" position:absolute;margin: 2% 0 0 3%;">姓名：唐嫣</span>
                    <span  style=" position:absolute;margin:2% 0 0 30%;">年级：2014级</span><br>
                    <span style="position:absolute;margin: 4% 0 0 3%;">专业：软件工程</span>
                    <span style="position:absolute;margin: 4% 0 0 40%;">年龄：24</span>
                    <br>
                    <span style="position:absolute;margin: 6% 0 0 3%"> 分院：信息工程学院</span><br>
                    <span style="position:absolute;margin: 8% 0 0 3%">社区：国际青年社区</span><br>
                    <span style="position:absolute;margin: 10% 0 0 3%">职务：学生干部</span>
                </div>
            </div>
            <!--搜索查询条件-->
            <div class="search_tj">
                <p>
                    <span>
                        年级：<select>
                                <option>2014级</option>
                                <option>2015级</option>
                                <option>2016级</option>
                                <option>2017级</option>
                              </select>
                    </span>
                    <span>
                        分院：<select>
                                <option>信息工程学院</option>
                                <option>会计学院</option>
                              </select>
                    </span>
                </p><br>
                <p>
                    <span>
                        专业：<select>
                                <option>软件工程</option>
                                <option>通信工程</option>
                              </select>
                    </span>
                    <span>
                        社区：<select>
                                <option>第一社区</option>
                                <option>第二社区</option>
                                <option>第三社区</option>
                              </select>
                    </span>
                </p><br>
                <p>
                    <span>学号：<input type="text" placeholder="输入学号"></span>
                    <span>
                        性别：<select>
                                <option>男</option>
                                <option>女</option>
                              </select>
                    </span>
                </p>
            </div>
            <!--查询按钮-->
            <div class="ok_query">
                <button>确认查询</button>
            </div>
        </div>
        <!--左下半部分表格-->
        <div class="left_node_down">
            <h2 style="color: #54DFE3;font-size: 20px;text-align: center;margin-top: 10px">最近一个月消费记录</h2>
            <table width="90%" height="70%" style="margin-left: 5%;margin-top: 20px" cellspacing="0">
                <tr>
                    <td></td>
                    <td>支付方式</td>
                    <td>消费地点</td>
                    <td>消费金额</td>
                </tr>
                <tr>
                    <td>一月</td>
                    <td>一卡通</td>
                    <td>餐饮</td>
                    <td>￥1023.00</td>
                </tr>
                <tr>
                    <td>一月</td>
                    <td>一卡通</td>
                    <td>金桥</td>
                    <td>￥1223.00</td>
                </tr>
                <tr>
                    <td>一月</td>
                    <td>一卡通</td>
                    <td>商业街</td>
                    <td>￥1123.00</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="right_content" style="position: relative">
        <!--四个角加粗-->
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 0 0 5px;
        top:-5px;
        left:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 5px 5px 0 0;
        top:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0px 5px 5px 0;
        bottom:-5px;
        right:-5px;"></span>
        <span style="position: absolute;
        padding:15px;
        border-style: solid;
        border-color: #02C2E1;
        border-width: 0px 0px 5px 5px;
        bottom:-5px;
        left:-5px;"></span>
        <!--四个图表位置-->
        <div id="main" style=""></div>
        <div id="main1" style=""></div>
        <div id="main2"></div>
        <div id="main3"></div>
    </div>
</div>
<!--main-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: '学生消费情况',
            subtext: '模拟数据',
            x:'right',
            y:'bottom',
            textStyle : {
                color: 'white'
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['餐饮','商业街','金桥餐厅','EU酒店','门诊']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : false,
        series : (function (){
            var series = [];
            for (var i = 0; i < 30; i++) {
                series.push({
                    name:'消费记录',
                    type:'pie',
                    itemStyle : {normal : {
                        label : {show : i > 28},
                        labelLine : {show : i > 28, length:20}
                    }},
                    radius : [i * 4 + 40, i * 4 + 43],
                    data:[
                        {value: i * 128 + 80,  name:'餐饮'},
                        {value: i * 64  + 160,  name:'商业街'},
                        {value: i * 32  + 320,  name:'金桥餐厅'},
                        {value: i * 16  + 640,  name:'EU酒店'},
                        {value: i * 8  + 1280, name:'门诊'}
                    ]
                })
            }
            series[0].markPoint = {
                symbol:'emptyCircle',
                symbolSize:series[0].radius[0],
                effect:{show:true,scaleSize:12,color:'rgba(250,225,50,0.8)',shadowBlur:10,period:30},
                data:[{x:'50%',y:'50%'}]
            };
            return series;
        })()
    };
    setTimeout(function (){
        var _ZR = myChart.getZrender();
        var TextShape = require('zrender/shape/Text');
        // 补充千层饼
        _ZR.addShape(new TextShape({
            style : {
                x : _ZR.getWidth() / 2,
                y : _ZR.getHeight() / 2,
                color: '#fff',
                text : '恶梦的过去',
                textAlign : 'center'
            }
        }));
        _ZR.addShape(new TextShape({
            style : {
                x : _ZR.getWidth() / 2 + 200,
                y : _ZR.getHeight() / 2,
                brushType:'fill',
                color: '#fff',
                text : '美好的未来',
                textAlign : 'left',
                textFont:'normal 20px 微软雅黑'
            }
        }));
        _ZR.refresh();
    }, 2000);


    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
<!--main1-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main1'));

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
<!--main2-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main2'));

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
<!--main3-->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts图表
    var myChart = echarts.init(document.getElementById('main3'));

    // 为echarts对象加载数据
    myChart.setOption(option);
</script>
</body>
</html>